<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <ul>
      <li v-for="(item, index) of users" :key="index">
        <!--  :to="`/user/${item}/${index}?from=index`"-->
        <router-link :to="{
          name:'user',
          params:{
            id:item,
            index
          },
          query:{
            from:'index'
          }
        }">{{item}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  // @ is an alias to /src
  import HelloWorld from "@/components/HelloWorld.vue";

  export default {
    name: "Home",
    components: {
      HelloWorld,
    },
    data() {
      return {
        users: ['curry', 'stephen', 'james', 'kobe']
      }
    },
    beforeCreate() {
      console.log(' beforeCreate');
    },
    created() {
      console.log('created');
    },
    beforeMount() {
      console.log('beforeMount');
    },
    mounted() {
      console.log('mounted');
    }
  };
</script>